// 引入样式
import "../../assets/css/normalize.less";
import "../../assets/css/reset.less";
import "../../assets/css/property.less";
import "../../assets/css/basic.less";

import "./home.less";
import { $ } from "../../utils/dom.js";
// 引入请求接口
import { getUserInfoReq, postUserClockInReq } from "../../api/user";

// 引入swiper js
import Swiper from "swiper/bundle";
// 引入swiper 样式
import "swiper/css/bundle";

import "../../assets/fonts/font_kok358gumca/iconfont.css";
import "../../assets/fonts/font_iysuojan2xi/iconfont.css";

import { showBottomNav } from "../../utils/nav";

/**
 * 导航栏
 */
showBottomNav("home");

/**
 * 轮播图
 */
const swiper = new Swiper(".swiper", {
	// 自动播放
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
	},
	// 循环播放
	loop: true,

	pagination: {
		el: ".swiper-pagination",
	},
});

/**
 * 获取用户信息
 */

const get_user_info = async () => {
	let res = await getUserInfoReq();
	let { errno, data } = res.data;
	console.log(res.data);
	if (res.data.errno === 0) {
		// 渲染数据
		// 打卡时间
		let clockDate = (Date.now() - new Date(data.lastClockDate)) / 1000 / 3600;
		$(".rank span").textContent = data.ranking;
		$(".clockIn p span").textContent = data.clockCount;
		$(".count").textContent = data.badges;

		// 判断如果打卡日期小于24，设置：打卡  否则：今日打卡

		$(".clockIn button").value = clockDate < 24 ? "已打卡" : "今日打卡";
		$(".clockIn button").disabled = clockDate < 24 ? true : false;
	}
};
get_user_info();

/**
 *  点击打卡
 */
console.log($(".clockIn button"));

$(".clockIn button").addEventListener("click", async () => {
	let res = await postUserClockInReq();
	if (res.data.errno === 0) {
		$(".clockIn p span").textContent++;
		$(".clockIn button").value = "已打卡";
		$(".clockIn button").disabled = true;
	}
});
